<template>
    <div class="inputDom" :style="myStyles">
        <input v-if="isNumber == 0" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            @focus="inputOrg" :disabled="disabled">
        <input v-if="isNumber == 1" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            @focus="inputOrg" :disabled="disabled" type="number" oninput="value=value.replace(/[^0-9]/g,'')">
        <input v-if="isNumber == 2" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            @focus="inputOrg" :disabled="disabled" type="number" oninput="value=value.replace(/[^0-9.]/g,'')">
        <div class="leftText">{{ leftText }}</div>
        <div v-show="isAssociationShow" :class="isAssociation ? 'btHit1' : 'btHit2'">{{ isAssociation ? '匹配楼盘字典成功 ✔' :
            '未匹配到合适的楼盘 ✘' }}
        </div>

        <div class="popup" v-if="show" :style="myStyles">
            <div class="item_name" v-for="s in fillDataList" v-bind:key="s" @click="selectItem(s)">
                <div v-if="s.name === inputValue" class="item_name_default">{{ s.name }}</div>
                <div v-else>{{ s.name }}</div>
            </div>
        </div>

    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
</template>
    
<script>

export default {
    name: 'CommonInputAndSelect',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        dataList: {
            default: []
        },
        hit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        myStyles: {
            default: { width: '160px' }
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        isNumber: {
            default: 2,
            type: Number
        },
        insertKey: String,
        default: {
            default: ''
        },
        disabled: Boolean
    },
    data() {
        return {
            inputValue: this.default,
            hits: this.hit,
            isHit: false,
            show: false,
            fillDataList: this.dataList,
            isAssociation: false,
            isAssociationShow: false,
            id: '',
            areaIds: '',
            mapCoordinates: ''
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            let flag = true
            if (this.isMust && !String(this.inputValue)?.trim()) {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            return flag
        },
        handClick() {
            this.show = !this.show
            if (this.show)
                this.$nextTick(() => {
                    const popupEl = document.querySelector('.popup');

                    // 如果找到了弹出框元素
                    if (popupEl) {
                        // 计算弹出框底部距离窗口底部的距离
                        const bottomDist = popupEl.getBoundingClientRect().bottom - window.innerHeight;
                        // 如果底部距离小于弹出框高度，说明弹出框被遮挡，需要向上移动
                        if (bottomDist > 30) {
                            // 修改弹出框的样式，将其向上移动
                            popupEl.style.top = `-250px`;
                        } else {
                            // 如果不被遮挡，清除样式，恢复原位置
                            popupEl.style.top = 'none';
                        }
                    }
                })
        },
        selectItem(s) {
            this.inputValue = s.name
            this.id = s.id
            this.areaIds = s.areaIds
            this.mapCoordinates = s.mapCoordinates
            this.show = !this.show
        },
        inputOrg() {
            this.show = true
            this.fillDataList = this.dataList
        }
    },
    watch: {
        inputValue: {
            handler() {
                this.isHit = false
                const temp = this.dataList.filter(v => v.name === this.inputValue)
                const temp2 = this.dataList.filter(v => v.name !== null)
                this.fillDataList = temp2.filter(v => v.name.includes(this.inputValue))
                if (temp.length <= 0) {
                    this.isAssociation = false
                } else {
                    this.isAssociation = true
                }
                if (this.inputValue != '') {
                    this.isAssociationShow = true
                } else {
                    this.isAssociationShow = false
                }
                if (this.isAssociation) {
                    let temp = { [this.insertKey]: this.inputValue, communityId: this.id, areaIds: this.areaIds, mapCoordinates: this.mapCoordinates }
                    return this.$emit('returnData', temp)
                } else {
                    let temp = { [this.insertKey]: this.inputValue, areaIds: '' }
                    return this.$emit('returnData', temp)
                }
            }
        },
        default() {
            this.inputValue = this.default
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 13px;
    margin-top: 1px;
    font-size: 12px;
    top: 25px;
    overflow: auto;
    max-height: 200px;
}

.popup::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    background-color: white;
    /*滚动槽颜色*/
}

.popup::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #79bbff;
    ;
    /*滚动条颜色*/
}

.popup::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.item_name:hover {
    background-color: #eee;
}

.item_name_default {
    color: #6698ff;
}

.btHit1 {
    position: absolute;
    font-size: 12px;
    top: 30px;
    color: #4db64d;
}

.btHit2 {
    position: absolute;
    font-size: 12px;
    top: 30px;
    color: orange;
}
</style>